<template>
  <div class="wrapper-right">
    <div class="title-box">
      <Title title="现场人气榜" style="color: #e4393c" />
      <i class="iconfont icon-show_renqiredu"></i>
    </div>
    <div class="card-box" v-if="tableData.length !== 0">
      <el-card
        class="card-item"
        :header-style="{ padding: '15px' }"
        :body-style="{ padding: '10px 15px' }"
        v-for="(item, index) in tableData"
        :key="index"
        style="margin-bottom: 10px"
      >
        <img
          class="card-top-icon"
          src="@/assets/images/home/rqTop.png"
          v-if="item.assessment == 5"
          alt=""
        />
        <div class="card-header">
          <span class="card-title">
            <i class="iconfont icon-xiaoquguanli"></i>
            {{ item.community }}</span
          >
        </div>
        <div class="card-body">
          <div class="card-body-item">
            <span class="card-body-item-title">所属营业部：</span>
            <span class="card-body-item-content">{{ item.branch }}</span>
          </div>
          <div class="card-body-item">
            <span class="card-body-item-title">人气评估：</span>
            <span class="card-body-item-content"
              ><el-rate
                v-model="item.assessment"
                disabled
                :colors="['#e4393c', '#e4393c', '#e4393c']"
                disabled-void-color="#c8c8c8"
              ></el-rate
            ></span>
          </div>

          <div class="card-body-item">
            <span class="card-body-item-title">场景评价：</span>
            <span class="card-body-item-content">
              <div v-if="item.process == '1'">
                <el-tag type="success">好</el-tag>
              </div>
              <div v-if="item.process == '2'">
                <el-tag type="warning">一般</el-tag>
              </div>
              <div v-if="item.process == '0'">
                <el-tag type="danger">差</el-tag>
              </div>
            </span>
          </div>
        </div>
      </el-card>
      
    </div>
    <el-empty v-if="tableData.length == 0" description="暂无数据"></el-empty>
  </div>
</template>

<script>
import { countByRanking } from "@/api/home";
import { getDeptTree } from "@/api/system/user";
import { popular } from "@/api/api";
import Title from "../Title";
import store from "@/store";
export default {
  name: "HomeRight",
  components: { Title },
  props: {
      targetTime: null
    },
    watch: {
      targetTime: function (newVal, oldVal) {
        if (newVal == null || newVal == "") {
          this.postData.targetTime = this.formatDate();
        }
        else {
          this.postData.targetTime = newVal;
        }
        this.getPopular(this.postData)
      }
    },
  data() {
    return {
      postData: {
        // deptId: 219,
        deptId: store.state.user.deptId, //将缓存的用户id赋值给userId，用于查询营销人员
        targetTime: this.formatDate(),
      },

      //小区业务数据统计排名
      tableData: [],
      // tableData: [
      //   {
      //     branch: "范家湾营业部",
      //     community: "丰和丽园",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "十里店营业部",
      //     community: "水岸天成",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "皋兰路营业部",
      //     community: "路桥音乐广场",
      //     assessment: 4,
      //     process: "3",
      //   },
      //   {
      //     branch: "庆阳路营业部",
      //     community: "六尺新苑",
      //     assessment: 3.6,
      //     process: "2",
      //   },
      //   {
      //     branch: "兰大营业部",
      //     community: "酒钢大厦",
      //     assessment: 3,
      //     process: "2",
      //   },
      //   {
      //     branch: "省委营业部",
      //     community: "中广宜景湾",
      //     assessment: 1.5,
      //     process: "1",
      //   },
      //   {
      //     branch: "和平路营业部",
      //     community: "红山铝茵小区",
      //     assessment: 3,
      //     process: "1",
      //   },
      //   {
      //     branch: "铁路局营业部",
      //     community: "金轮花园",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "定西路营业部",
      //     community: "和平人家",
      //     assessment: 4,
      //     process: "1",
      //   },
      //   {
      //     branch: "南关营业部",
      //     community: "贡元巷平台小区",
      //     assessment: 2,
      //     process: "1",
      //   },
      //   {
      //     branch: "张掖路营业部",
      //     community: "兰大二院小区",
      //     assessment: 4,
      //     process: "1",
      //   },
      //   {
      //     branch: "白银路营业部",
      //     community: "城关区工行高层",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "五泉营业部",
      //     community: "望垣坪",
      //     assessment: 1,
      //     process: "1",
      //   },
      //   {
      //     branch: "文化宫营业部",
      //     community: "西藏家园",
      //     assessment: 3,
      //     process: "1",
      //   },
      //   {
      //     branch: "任家庄营业部",
      //     community: "明珠家园",
      //     assessment: 4,
      //     process: "1",
      //   },
      //   {
      //     branch: "万达城营业部",
      //     community: "东立开泰园南区/北区",
      //     assessment: 2,
      //     process: "1",
      //   },
      //   {
      //     branch: "杨家桥营业部",
      //     community: "中海铂悦府",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "福利路营业部",
      //     community: "西固区宏利新城小区",
      //     assessment: 3,
      //     process: "1",
      //   },
      //   {
      //     branch: "西固城营业部",
      //     community: "三毛小区",
      //     assessment: 1,
      //     process: "1",
      //   },
      //   {
      //     branch: "陈坪营业部",
      //     community: "兰玻旧区",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "生产街营业部",
      //     community: "凯地华丽世家",
      //     assessment: 2,
      //     process: "1",
      //   },
      //   {
      //     branch: "草场街营业部",
      //     community: "嘉泰名居",
      //     assessment: 4,
      //     process: "1",
      //   },
      //   {
      //     branch: "碧桂园营业部",
      //     community: "园丁园",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "九州营业部",
      //     community: "海亮和园",
      //     assessment: 2,
      //     process: "1",
      //   },
      //   {
      //     branch: "盐场路营业部",
      //     community: "上川家园",
      //     assessment: 1,
      //     process: "1",
      //   },
      //   {
      //     branch: "张苏滩营业部",
      //     community: "安居小区",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "雁东营业部",
      //     community: "居然之家",
      //     assessment: 4,
      //     process: "1",
      //   },
      //   {
      //     branch: "雁西营业部",
      //     community: "宁安小区",
      //     assessment: 3,
      //     process: "1",
      //   },
      //   {
      //     branch: "东城区营业部",
      //     community: "亚太玫瑰苑",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "西城区营业部",
      //     community: "佳永四期",
      //     assessment: 1,
      //     process: "1",
      //   },
      //   {
      //     branch: "城西营业部",
      //     community: "悠山瑞景院",
      //     assessment: 4,
      //     process: "1",
      //   },
      //   {
      //     branch: "城东营业部",
      //     community: "锦墨院小区",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "石洞营业部",
      //     community: "南源小区",
      //     assessment: 3,
      //     process: "1",
      //   },
      //   {
      //     branch: "玖珑湾营业部",
      //     community: "碧桂园",
      //     assessment: 3,
      //     process: "1",
      //   },
      //   {
      //     branch: "新广场营业部",
      //     community: "六组团小区",
      //     assessment: 2,
      //     process: "1",
      //   },
      //   {
      //     branch: "绿地营业部",
      //     community: "舟曲新苑",
      //     assessment: 5,
      //     process: "1",
      //   },
      //   {
      //     branch: "彩虹城营业部",
      //     community: "家合景园",
      //     assessment: 4,
      //     process: "1",
      //   },
      // ],
    };
  },
  created() {
    // this.getDeptTree(100);
    // this.countByRanking({ deptId: 100 });
    this.getPopular(this.postData);
  },
  methods: {
    formatDate(date = new Date()) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
    getPopular(query) {
      this.tableData=[];
      popular(query).then((res) => {
        if (res.length > 0) {
          let process = "";
          res.forEach((item, index) => {
            if (this.checkAuditTime('18:01', '12:00')) {
              item.signUrl? (process = "1") : (process = "0");
            }
            if (this.checkAuditTime('12:01', '15:00')) {
              item.replayUrl? (process = "1") : (process = "0");
            }
            if (this.checkAuditTime('15:01', '17:00')) {
              item.peakednessUrl? (process = "1") : (process = "0");
            }
            if (this.checkAuditTime('17:01', '18:00')) {
              item.signOutUrl? (process = "1") : (process = "0");
            }
            this.tableData.push({
              branch: item.businessDepartment,
              community: item.deptName,
              assessment: this.getStarRating(item.popAssess),
              process: process,
            });
          });
        }
      });
    },

    getStarRating(popAssess) {
      if (popAssess >= 20) {
        return 5; // 20张以上：5颗星
      } else if (popAssess >= 15) {
        return 4; // 15-20张：四颗星（含15张）
      } else if (popAssess >= 10) {
        return 3; // 10-14张：三颗星
      } else if (popAssess >= 5) {
        return 2; // 5-9张：两颗星
      } else {
        return 1; // 0-4张：一颗星
      }
    },
    checkAuditTime(startTime, endTime) {
      // 获取当前时间
      const date = new Date();
      // 获取当前时间的年月日
      const dataStr = `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()} `;

      // 获取开始时间、结束时间、现在时间的时间戳
      let startDate = new Date(dataStr + startTime).getTime();
      let endDate = new Date(dataStr + endTime).getTime();
      let nowDate = date.getTime();

      const s = startDate > endDate; // 判断开始时间否大于结束时间

      if (s) [startDate, endDate] = [endDate, startDate]; // 若开始时间否大于结束时间则交换值

      // 判断现在的时间是否在开始时间和结束时间之间，若s为true则结果取反
      if (nowDate > startDate && nowDate < endDate) {
        return s ? false : true;
      } else {
        return s ? true : false;
      }
    },
    /** 查询部门下拉树结构 */
    async getDeptTree(deptId) {
      getDeptTree({ deptId: deptId }).then((response) => {
        var treeData = response.data.children;

        if (deptId == 100) {
          this.salesDepartmentList = [
            {
              deptName: response.data.deptName,
              deptId: response.data.deptId,
            },
            {
              deptName: response.data.children[0].deptName,
              deptId: response.data.children[0].deptId,
            },
            {
              deptName: response.data.children[1].deptName,
              deptId: response.data.children[1].deptId,
            },
          ];

          console.log(this.salesDepartmentList, "树结构");
          // this.deptOptions = treeData;
        } else {
          this.baoQuListR = response.data.children;
        }
      });
    },
    countByRanking(data) {
      countByRanking(data).then((response) => {
        console.log(response.data, "小区业务数据统计排名");
        response.data.sort((a, b) => {
          return (
            b.percent.substring(0, b.percent.length - 1) -
            a.percent.substring(0, a.percent.length - 1)
          );
        });
        response.data.forEach((item, index) => {
          /*  this.tableData.push({
              rank: index + 1,
              community: item.deptName,
              accomplish: item.percent,
              isOk: item.finished,
           }); */
        });
      });
    },
    //时间切换
    handleCommunityTime() {
      this.$message("数据完善中...");
    },
    //包区数据选中
    handleCommunityBusinessBaoquChange(value) {
      this.tableData = [];
      this.countByRanking({ deptId: value });
    },
    //小区业务数据统计排名
    handleCommunityBusinessChange(value) {
      this.baoQuListR = [];
      this.tableData = [];
      this.communityBusiness.baoQu = "";
      this.postData.deptId = value;
      this.countByRanking({ deptId: value });
      this.getDeptTree(value);
    },
    getRanking(rank) {
      if (rank == "1") {
        return "first";
      } else if (rank == "2") {
        return "second";
      } else if (rank == "3") {
        return "third";
      } else {
        return "other";
      }
    },
  },
};
</script>

<style scoped lang="scss">
//@import url("//at.alicdn.com/t/c/font_4986911_bxuauzfygb.css");
// @import url("../../../assets//fonts/iconfont.css");

.wrapper-right {
  width: 100%;
  height: 100%;
  .card-box {
    /* height: 95%; */
    /* overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    overflow: auto;

    .card-item {
      width: 100%;
      height:134px;
      position: relative;
      .card-top-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        transform: rotate(30deg);
      }
      .card-header {
        margin-bottom: 10px;
        .card-title {
          font-size: 18px;
          font-weight: bold;
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 24px;
            font-weight: normal;
            color: #3dc8fd;
            margin-right: 5px;
          }
        }
      }
      .card-body {
        line-height: 24px;
        .card-body-item {
          display: flex;
          align-items: center;

          .card-body-item-title {
            color: #3dc8fd;
          }
        }
      }
    }
  }
  .title-box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e4393c;

    i {
      font-size: 22px;
      margin-bottom: 16px;
    }
  }
}

.filtr-selects {
  display: flex;
  justify-content: end;
}

.filter-selects-righttop {
  position: absolute;
  top: -2px;
  right: -5px;
  width: 56%;

  .bottom-selects {
    width: 33%;
  }
}

.first {
  color: #fff;
  background-color: #fd4f4f;
  /* 红色背景 */
}

.second {
  color: #fff;
  background-color: #fcca00;
  /* 黄色背景 */
}

.third {
  color: #fff;
  background-color: #a2ef4d;
  /* 绿色背景 */
}

.other {
  color: #fff;
  background-color: #cecece;
  /* 灰色背景 */
}

.isOk-yes {
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 16px;
    height: 16px;
    margin-left: 5px;
  }
}

.isOk-no {
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 16px;
    height: 16px;
    margin-left: 5px;
  }
}

::v-deep .el-table td.el-table__cell div {
  display: flex;
  justify-content: center;
}

::v-deep .el-rate__icon {
  margin-right: 0;
}

::v-deep .el-rate__item.is-disabled .el-rate__icon {
  color: #ff0000 !important;
}

/* ::v-deep .el-table tr { */
/* background-color: rgba(228 57 60 / 0.1) !important; */
/* color: #e4393c !important; */
/* } */
::v-deep .el-rate__icon {
  font-size: 28px;
}
::v-deep .el-rate {
  height: auto;
  line-height: 0;
}
::v-deep .el-tag {
  font-size: 14px;
}
::v-deep .el-card {
  border: 1px solid #c8c8c8;
}
</style>
